<template>
    <!-- Main content -->
    <div>
        <div class="row">
            <div class="col-xs-12">
                <theme-box title="用户信息查询">
                    <form class="form-inline" @submit.prevent v-el:form>
                        <form-input title="用户名" :up-table="true" name="usrName"></form-input>

                        <button type="reset" @click="reset" class="btn btn-warning pull-right">重置</button>
                        <v-button theme="primary" @click="search" class="pull-right">查询</v-button>
                    </form>
                    <table class="table table-bordered table-striped" style="width:100%" v-el:table>
                    </table>
                </theme-box>
            </div>
            <!-- /.col -->
        </div>
        <modal-container title="详情" v-el:detail-modal v-ref:detail-modal class="edit-modal">
            <form @submit.prevent @reset.prevent v-el:detail-mform>
                <div class="modal-body">
                    <!-- <table-modal :item="item" :columns-set="columnsDetailSet"></table-modal> -->
                    <table class="table table-bordered table-hover">
                        <tr>
                            <td style="width:50%">头像</td>
                            <td><img class="table-avatar" :src='item.usrPicUrl' style="width:30%"></td>
                        </tr>
                        <tr>
                            <td style="width:50%">商户号</td>
                            <td>{{item.mchtId}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">用户名</td>
                            <td>{{item.userName}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">性别</td>
                            <td>
                                {{(item.usrSex == 'man' && '男')||(item.usrSex == 'woman' && '女')||(item.usrSex == 'secre' && '保密')||(item.usrSex == null && '保密')}}
                            </td>
                        </tr>
                        <tr>
                            <td style="width:50%">用户类型</td>
                            <td>{{item.usrType}}
                            </td>
                        </tr>
                        <tr>
                            <td style="width:50%">所属商户</td>
                            <td>{{item.mchtName}}</td>
                        </tr>
                        <tr v-show="item.tlrNo">
                            <td style="width:50%">员工号</td>
                            <td>{{item.tlrNo}}</td>
                        </tr>
                        <tr v-show="item.usrLvl">
                            <td style="width:50%">用户等级</td>
                            <td>{{item.usrLvl}}</td>
                        </tr>
                        <tr v-show="item.usrStat">
                            <td style="width:50%">用户状态</td>
                            <td>{{item.usrStat == "0" ? "正常" : "锁定"}}</td>
                        </tr>
                        <tr v-show="item.usrBirthday">
                            <td style="width:50%">用户生日</td>
                            <td>{{item.usrBirthday}}</td>
                        </tr>
                        <tr v-show="item.usrMarriageStat">
                            <td style="width:50%">婚姻状况</td>
                            <td>{{(item.usrMarriageStat == "unmarried"&&"未婚")||(item.usrMarriageStat == "married"&&"已婚")||(item.usrMarriageStat == null&&"")}}
                            </td>
                        </tr>
                        <tr v-show="item.mobileNo">
                            <td style="width:50%">手机号</td>
                            <td>{{item.mobileNo}}</td>
                        </tr>
                        <tr v-show="item.usrEmail">
                            <td style="width:50%">Email</td>
                            <td>{{item.usrEmail}}</td>
                        </tr>
                        <tr v-show="item.usrWeboNo">
                            <td style="width:50%">微博号</td>
                            <td>{{item.usrWeboNo}}</td>
                        </tr>
                        <tr v-show="item.recoMember">
                            <td style="width:50%">推荐人</td>
                            <td>{{item.recoMember == "0" ? "" : item.recoMember}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">客户注册时间</td>
                            <td>{{item.usrRegTime}}</td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <v-button class="pull--left" data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                </div>
            </form>
        </modal-container>
        <!-- /.row -->
    </div>
    <!-- /.content -->
</template>

<style lang="less" scoped>
    .form-inline .btn + .btn {
        margin-right: 10px;
    }

    .form-inline .form-group + .form-group {
        margin-left: 20px;
    }
</style>
<script>
    //解决datatables弹窗警告
    $.fn.dataTable.ext.errMode = 'none';
    import {
        dateTime,
        createDataTable
    } from 'ui/collections/general.js'
    var serialize = require('form-serialize');
    import {dateTransform} from "lib/method.js"

    var dataTable;
    var columnsSet;
    export default {
        data: () => ({
            item: {},
            columnsSet: [],
        }),
        methods: {
            //还原弹出框位置
            resetBindDrag() {
                this.$refs.modal._resetBindDrag();
            },
            //查询按钮
            search: function () {
                dataTable.ajax.reload();
            },
            //重置按钮
            reset: function () {
                $(".form-inline")[0].reset();
                dataTable.ajax.reload();
            }
        },
        created() {
            //datatable所用数组
            columnsSet = [
                //   {
                //     title: "编号",
                //     data: "usrId",
                //     edit: true,
                //     className: "operate"
                // },
                {
                    title: "头像",
                    data: "usrPicUrl",
                    className: "operate",
                    render: function (data) {
                        return `<img class="table-avatar" src=` + data + `>`
                    }
                }, {
                    title: "用户名",
                    data: "userName",
                    className: "operate"
                },
                // {
                //     title: "登录密码",
                //     data: "loginPwd",
                //     className: "operate"
                // },
                {
                    title: "性别",
                    data: "usrSex",
                    className: "operate",
                    render: function (data) {
                        var value;
                        if(data == "man"){
                            value = '男'
                        }else if(data == "woman"){
                            value = '女'
                        }else{
                            value = '保密'
                        }
                        return value;
                    }
                }, {
                    title: "手机号",
                    data: "mobileNo",
                    edit: true,
                    className: "operate"
                },
                // {
                //     title: "EMAIL",
                //     data: "usrEmail",
                //     edit: true,
                //     className: "operate"
                // },
                //  {
                //     title: "微信号",
                //     data: "usrWchatNo",
                //     edit: true,
                //     className: "operate"
                // },
                // {
                //     title: "微信open",
                //     data: "usrWchatOpenid",
                //     className: "operate"
                // },
                // {
                //     title: "微博账号",
                //     data: "usrWeboNo",
                //     edit: true,
                //     className: "operate"
                // },
                // {
                //     title: "婚姻状况",
                //     data: "usrMarriageStat",
                //     options: [{key:"未婚",value:"unmarried"},{key:"已婚",value:"married"}],
                //     className: "operate",
                //     render: function(data) {
                //       return (data == "unmarried") ? "未婚" : "已婚"
                //     }
                // },
                // {
                //     title: "用户生日",
                //     data: "usrBirthday",
                //     edit: true,
                //     className: "operate"
                // },
                {
                    title: "用户类型",
                    data: "usrType",
                    className: "operate",
                    render: function (data) {
                        if(data == "00") {
                            return "券券用户";
                        }else if(data == "02"){
                            return "店员";
                        }else if(data == "03"){
                            return "店长";
                        }else {
                            return "其他";
                        }
                    }
                }, {
                    title: "用户等级",
                    data: "usrLvl",
                    className: "operate"
                }, {
                    title: "用户状态",
                    data: "usrStat",
                    className: "operate",
                    render: function (data) {
                        return (data == "0") ? "正常" : "锁定"
                    }
                }, {
                    title: "客户注册日期",
                    data: "usrRegTime",
                    className: "operate",
                      render:function(data){
                         return dateTransform(data)
                     }
                },
                // {
                //     title: "推荐人",
                //     data: "recoMember",
                //     edit: true,
                //     className: "operate"
                // }
                {
                    title: "相关操作",
                    className: "operate",
                    width: "160px",
                    render: function (value, type, row) {
                        return `
                           <button type="button" class="btn btn-defalt btn-sm detail">详情</button>

                       `
                    }
                }
            ]
        },
        ready: async function () {
            dateTime({
                format: "yyyy-mm-dd",
                minView: "2"
            })
            this.$set("columnsSet", columnsSet)
            var self = this;
            //创建dataTable
            dataTable = $(this.$els.table).DataTable({
                "columns": this.columnsSet, //定义列
                "ajax": async function (data, callback, settings) {
                    var page = [{
                        "name": "iDisplayStart",
                        "value": 1 + data.start / data.length
                    }, {
                        "name": "iDisplayLength",
                        "value": data.length
                    }];
                    //表单序列化数据
                    var _data = serialize(self.$els.form, {
                        hash: true,
                        disabled: true,
                        empty: true
                    });
                    _data.aoData = JSON.stringify(page);
                    //发送请求
                    var result = await self.$post({
                        url: "/api/v3" + projectName_Url + "/plat/usr/query",
                        data: _data,
                        method: "POST"
                    })
                    if (result.respCode != "00") {
                        Midway.alert({
                            title: "操作失败",
                            content: result.content
                        })
                    }
                    callback({
                        recordsTotal: result.content.total,
                        recordsFiltered: result.content.total,
                        data: result.content.list || []
                    })
                }
            });

            $(self.$el).on("click", ".detail", function () {
                var Row = $(this).closest('tr').get(0);
                const dataArray = JSON.parse(JSON.stringify(dataTable.row(Row).data()));
                dataArray.usrRegTime = dateTransform(dataArray.usrRegTime)
                if(dataArray.usrType == "00") {
                    dataArray.usrType = "券券用户";
                }else if(dataArray.usrType == "02"){
                    dataArray.usrType = "店员";
                }else if(dataArray.usrType == "03"){
                    dataArray.usrType = "店长";
                }else {
                    dataArray.usrType = "其他";
                }
                self.item = dataArray;
                $(self.$els.detailModal).modal('show');
            });
        },
    }
</script>
